<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        a{
            cursor: pointer;
        }
        .marker{
            width:5px;
            height:5px;
            position:absolute;
            left:0;
            top:0;
            background: red;
        }
        body{
            margin:0;
            padding: 0;
            background-color: #3f494d;
            font-family: monospace;
            height:100%;
            overflow: hidden;
        }
        #ZoomPercent{
            position:absolute;
            right:5px;
            bottom:5px;
            border-radius:10px;
            background:rgba(0,0,0,0.3);
            color:#3f494d;
            padding:5px 15px;
            box-shadow:0 1px 0 rgba(202,209,212,0.21);
            cursor:pointer;
        }
        #ZoomPercent:hover{
            color:#54dbff;
        }
        #sideBar{
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100px;
            background: rgba(0,0,0,0.2);
        }
        #phoneOverlay{
            position: absolute;
            top:0;
            left: 0;
        }
        #container{
            width:100%;
            height:100%;
        }
        html{
            height:100%;
        }
        button{
            width:80px;
            height:80px;
            margin:10px 10px;
            border:1px rgba(255,255,255,0.7) solid;
            border-bottom: 5px solid rgba(255,255,255,0.7);
            opacity:0.3;
            display: inline-block;
            background-color: rgba(255,255,255,0.2);
            background-position:  center;
            background-repeat: no-repeat;
        }
        button:hover{
            background-color: rgba(100,200,255,0.3);
            opacity: 0.5;
        }
        button:active, button.active{
            border-bottom: 2px solid rgba(255,255,255,0.7);
            margin-top:12px;
            height:77px;
            background-color: rgba(100,200,255,0.5);
        }
        #playBTN{
            background-image: url("simulator/imgs/play.png");
        }
        #rotateBtn{
            background-image: url("simulator/imgs/rotate.png");
        }
        #deviceBtn{
            background-image: url("simulator/imgs/device.png");
        }
        #devices{
            position:absolute;
            top:0;
            left:0;

            background: rgba(0,0,0,0.2);
            border:1px solid rgba(255,255,255,0.2);
        }
        #devices a{
            color: #54dbff;
            text-decoration: none;
        }
        #devices a:hover{
            color: #a9e7ff;
            text-decoration: underline;
        }
        #devices ul{
            list-style: none;
            padding:0;
            margin:15px;
        }
    </style>
    <meta charset="utf-8"/>
</head>
<body>
<div id="ZoomPercent">100%</div>
<div id="sideBar"><button id="playBTN" onclick="startCocos(this)"></button><button id="rotateBtn" onclick="Phone.getInstance().rotate(this)"></button><button id="deviceBtn" onclick="showDevices(this)"></button></div>
<div id="devices">
    <ul>
        <li><a onclick="changeDevice('1136x640')">1136 x 640</a></li>
        <li><a onclick="changeDevice('960x640')">960 x 640</a></li>
        <li><a onclick="changeDevice('960x540')">960 x 540</a></li>
        <li><a onclick="changeDevice('800x480')">800 x 480</a></li>
        <li><a onclick="changeDevice('854x480')">854 x 480</a></li>
        <li><a onclick="changeDevice('1280x720')">1280 x 720</a></li>
        <!--<li><a href="#" onclick="changeDevice('1280x800')">1280 x 800</a></li>-->
        <li><a onclick="changeDevice('480x320')">480 x 320</a></li>
        <li><a onclick="changeDevice('1024x768')">1024 x 768</a></li>
    </ul>
</div>
<div id="container"></div>
</body>
</html>
<script src="simulator/js/miniFramework.js"></script>
<script>
Number.prototype.clamp = function (min, max) {
    return this < min ? min : (this > max ? max : this);
};
// default config
var configObj = {
    orientation:"vertical",
    resolution:"960x640",
    showFPS:true,
    scale:1,
    tag:"gameCanvas",
    bootFile:"MoonWarriors-html5.js"
};
// parse url param
function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}
(function(){
    window.paramObj = getUrlVars();
    for(var x in window.paramObj)
    {
        configObj[x] = window.paramObj[x];
    }
})();
function setParam(key, value){
    window.paramObj[key] = value;
}
// preparation configuration codes
var ScreenSizes = {
    "800x480":{
        imgsrc:"simulator/imgs/800x480.png",
        dimension:{
            width:585,
            height:1064
        },
        screen:{
            width:480,
            height:800
        },
        offset:{
            x:53,
            y:132
        }
    },
    "960x640":{
        imgsrc:"simulator/imgs/960x640.png",
        dimension:{
            width:759,
            height:1485
        },
        screen:{
            width:640,
            height:960
        },
        offset:{
            x:63,
            y:263
        }
    },
    "960x540":{
        imgsrc:"simulator/imgs/960x540.png",
        dimension:{
            width:648,
            height:1280
        },
        screen:{
            width:540,
            height:960
        },
        offset:{
            x:52,
            y:158
        }
    },
    "480x320":{
        imgsrc:"simulator/imgs/480x320.png",
        dimension:{
            width:423,
            height:767
        },
        screen:{
            width:320,
            height:480
        },
        offset:{
            x:52,
            y:146
        }
    },
    "1136x640":{
        imgsrc:"simulator/imgs/1136x640.png",
        dimension:{
            width:763,
            height:1602
        },
        screen:{
            width:640,
            height:1136
        },
        offset:{
            x:65,
            y:237
        }
    },
    "1280x720":{
        imgsrc:"simulator/imgs/1280x720.png",
        dimension:{
            width:836,
            height:1623
        },
        screen:{
            width:720,
            height:1280
        },
        offset:{
            x:57,
            y:152
        }
    },
    "1024x768":{
        imgsrc:"simulator/imgs/1024x768.png",
        dimension:{
            width:870,
            height:1289
        },
        screen:{
            width:768,
            height:1024
        },
        offset:{
            x:51,
            y:132
        }
    },
    "854x480":{
        imgsrc:"simulator/imgs/854x480.png",
        dimension:{
            width:622,
            height:1205
        },
        screen:{
            width:480,
            height:854
        },
        offset:{
            x:77,
            y:153
        }
    }
};
var $container =cc.$("#container");
var $devices = cc.$("#devices");
var $zoomPercent = cc.$("#ZoomPercent");
var Phone = function(){
    this.div = cc.$new("div");
    this.div.style.display = "inline-block";
    this.shell = new Shell();
    this.display = Display.getInstance();

    document.body.appendChild(this.div);
    this.div.appendChild(this.shell.div);
    this.div.appendChild(this.display.div);
    if(configObj.orientation === "horizontal")
    {
        this.div.rotate(-90);
        this.display.div.rotate(90);
    }
};
Phone.prototype.init = function(){
    // add to the body
    $container.appendChild(this.div);
};
Phone.prototype.setScale = function(x){
    this.div.resize(x,x);
    $zoomPercent.textContent = (0|(x*100)) + "%";
};
Phone.prototype.centerize = function(){
    var winWidth = window.innerWidth;
    var winHeight = window.innerHeight;
    //find out if it fits
    var vScale = winHeight / this.div.clientHeight;
    var hScale = winWidth / this.div.clientWidth;
    var vOffset = 0;
    if(vScale <1 || hScale < 1)
    {
        if(vScale<hScale){
            configObj.scale = vScale;
            this.setScale(vScale);
            vOffset = (this.div.clientHeight - winHeight)/2;
        }
        else{
            configObj.scale = hScale;
            this.setScale(hScale);
        }
    }
    this.div.translates((winWidth/2)-(ScreenSizes[configObj.resolution].dimension.width/2),-vOffset);
};
Phone.prototype.rotate = function(){
    if(configObj.orientation === "vertical"){
        //going horizontal, rotate it by 90;
        if(!this.animTimer)
        {
            var animStart = Date.now();
            var div = this.div;
            var that = this;
            this.animTimer = setInterval(function(){
                var now = Date.now();
                if(now-animStart < 1000)
                {
                    var rot = (div.rotation-90)/2;
                    div.rotate(rot);
                }
                if(div.rotation <-89.9)
                {
                    div.rotate(-90);
                    that.stopAnim();
                }
            },1000/16);
        }
    }
    else{
        if(!this.animTimer)
        {
            var animStart = Date.now();
            var div = this.div;
            var that = this;
            this.animTimer = setInterval(function(){
                var now = Date.now();
                if(now-animStart < 1000)
                {
                    var rot = (div.rotation)/2;
                    div.rotate(rot);
                }
                if(0 - div.rotation < 0.1)
                {
                    div.rotate(0);
                    that.stopAnim();
                }
            },1000/16);
        }
    }
};
Phone.prototype.stopAnim = function(){
    console.log("stop rotate");
    if(this.animTimer)
    {
        clearInterval(this.animTimer);
        this.animTimer = null;

        if(configObj.orientation === "vertical")
        {
            configObj.orientation = "horizontal";
            setParam("orientation", "horizontal");
            var display = Display.getInstance();
            var width = ScreenSizes[configObj.resolution].screen.height;
            var height = ScreenSizes[configObj.resolution].screen.width;
            display.div.rotate(90);
            display.div.style.top = ((width - height)/2) +ScreenSizes[configObj.resolution].offset.y+"px";
            display.div.style.left  = ((height - width)/2) +ScreenSizes[configObj.resolution].offset.x+"px";
        }
        else{
            configObj.orientation = "vertical";
            setParam("orientation", "vertical");
            var display = Display.getInstance();
            var width = ScreenSizes[configObj.resolution].screen.width;
            var height = ScreenSizes[configObj.resolution].screen.height;
            display.div.rotate(0);
            display.div.style.top = ScreenSizes[configObj.resolution].offset.y+"px";
            display.div.style.left  = ScreenSizes[configObj.resolution].offset.x+"px";

        }
        display.div.style.width = width+"px";
        display.div.style.height = height+"px";
        display.touchPanel.style.width = width+"px";
        display.touchPanel.style.height = height+"px";
        if(cc.canvas)
        {
            cc.canvas.width = width;
            cc.canvas.height = height;
            cc.container.style.width = width+"px";
            cc.container.style.height = height+"px";
            cc.EGLView.getInstance()._adjustSizeKeepCanvasSize();
        }
    }
};
Phone.getInstance = function(){
    if(!Phone._instance)
    {
        Phone._instance = new Phone();
        Phone._instance.init();
    }
    return Phone._instance;
};
var Shell = function(){
    this.div = cc.$new("div");
    this.div.style.zIndex = 2;
    this.div.style.position = "relative";
    this.div.style.pointerEvents = "none";
    this.resetGraphics();
};
Shell.prototype.resetGraphics = function(){
    var conf = ScreenSizes[configObj.resolution];
    this.div.style.background = "url("+ conf.imgsrc +") no-repeat";
    this.div.style.width = conf.dimension.width + "px";
    this.div.style.height = conf.dimension.height + "px";
};
var Display = function(){
    this.div = cc.$new("div");
    this.div.obj = this;
    this.div.style.background = "black";
    this.div.style.position ="absolute";
    this.div.style.zIndex = 1;

    this.touchPanel = cc.$new("div");
    this.touchPanel.style.width = "100%";
    this.touchPanel.style.height = "100%";
    this.touchPanel.style.position = "absolute";
    this.touchPanel.style.zIndex = 1;
    this.div.appendChild(this.touchPanel);

    this.canvas= cc.$new("div");
    this.div.appendChild(this.canvas);
    this.canvas.id = configObj.tag;
    this.canvas.style.width = "100%";
    this.canvas.style.height = "100%";

    this.resizeDisplay();
};
Display.prototype.resizeDisplay = function(){
    var conf = ScreenSizes[configObj.resolution];
    if(configObj.orientation === "vertical")
    {
        var width = conf.screen.width;
        var height = conf.screen.height;
        this.div.style.top = conf.offset.y+"px";
        this.div.style.left  = conf.offset.x+"px";
    }
    else{
        var width = conf.screen.height;
        var height = conf.screen.width;
        this.div.style.top = ((width - height)/2) +conf.offset.y+"px";
        this.div.style.left  = ((height - width)/2) +conf.offset.x+"px";
    }
    this.div.style.width = width+"px";
    this.div.style.height = height +"px";
    this.touchPanel.style.width = width+"px";
    this.touchPanel.style.height = height+"px";
    if(cc.canvas)
    {
        cc.canvas.width = width;
        cc.canvas.height = height;
        cc.container.style.width = width+"px";
        cc.container.style.height = height+"px";
        cc.EGLView.getInstance()._adjustSizeKeepCanvasSize();
    }
};
Display.prototype.registerEvents = function(){
    var touchPanel = this.touchPanel;
    touchPanel.addEventListener("mousedown", function(e){
            var bcr = cc.canvas.getBoundingClientRect();
            var mdEvent = document.createEvent("MouseEvents");
            var pageOffsetY = document.body.scrollTop;
            var x = ((e.offsetX))+ bcr.left;
            var y = ((e.offsetY))+bcr.top - (touchPanel.clientHeight - bcr.height)+pageOffsetY;
            mdEvent.initMouseEvent("mousedown",false,false,cc.canvas,null, x, y, x, y, false,false,false,false,1,cc.canvas);
            cc.canvas.dispatchEvent(mdEvent);
            window.dispatchEvent(mdEvent);

        e.stopPropagation();
        e.preventDefault();

        return false;
    });
    touchPanel.addEventListener("mouseup", function(e){
            var bcr = cc.canvas.getBoundingClientRect();
            var mdEvent = document.createEvent("MouseEvents");
            var pageOffsetY = document.body.scrollTop;
            var x = ((e.offsetX))+ bcr.left;
            var y = ((e.offsetY))+bcr.top - (touchPanel.clientHeight - bcr.height)+pageOffsetY;
            mdEvent.initMouseEvent("mouseup",false,false,cc.canvas,null, x, y, x, y, false,false,false,false,1,cc.canvas);
            mdEvent.pageY = e.offsetY + bcr.top;
            cc.canvas.dispatchEvent(mdEvent);
        window.dispatchEvent(mdEvent);
        e.stopPropagation();
        e.preventDefault();
        return false;
    });
    touchPanel.addEventListener("mousemove", function(e){
            var bcr = cc.canvas.getBoundingClientRect();
            var mdEvent = document.createEvent("MouseEvents");
            var pageOffsetY = document.body.scrollTop;
            var x = ((e.offsetX ))+ bcr.left;
            var y = ((e.offsetY))+bcr.top - (touchPanel.clientHeight - bcr.height)+pageOffsetY;
            mdEvent.initMouseEvent("mousemove",true,false,cc.canvas,null, x, y, x, y, false,false,false,false,0,cc.canvas);
            mdEvent.pageY = e.offsetY + bcr.top;
            cc.canvas.dispatchEvent(mdEvent);
        e.stopPropagation();
        e.preventDefault();
        return false;

    });
};
Display.getInstance = function(){
    if(!Display._instance)
    {
        Display._instance = new Display();
    }
    return Display._instance;
};

var started = false;
function startCocos(button){
    if(!started)
    {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("DOMContentLoaded", false, true);
        window.dispatchEvent(evt);
    }
    started = true;
    var but = cc.$(button);
    but.addClass("active");
    Display.getInstance().registerEvents();
}
function showDevices(button){
    var but = cc.$(button);
    if($devices.style.display === "none")
    {
        $devices.style.display = "block";
        but.addClass("active");
    }
    else{
        $devices.style.display = "none";
        but.removeClass("active");
    }
}
function changeDevice(newDevice){
    var oldSize = ScreenSizes[configObj.resolution].dimension;
    var newSize = ScreenSizes[newDevice].dimension;
    var p = Phone.getInstance();
    p.div.translates((oldSize.width-newSize.width)/2 + p.div.position.x, (oldSize.height - newSize.height)/2+ p.div.position.y);
    configObj.resolution = newDevice;
    setParam("resolution", newDevice);
    p.shell.resetGraphics();
    Display.getInstance().resizeDisplay();
}
(function(){
    var script = cc.$new("script");
    script.src = configObj.bootFile;
    document.body.appendChild(script);
    $devices.style.display = "none";
    var simulator = Phone.getInstance();
    simulator.centerize();
    $devices.translates(100, 200);
    var mouseDown = false;
    $container.addEventListener("mousedown", function(){
        $devices.style.display = "none";
        cc.$("#deviceBtn").removeClass("active");
        mouseDown = true;
        return false;
    });
    $container.addEventListener("mouseup", function(){
        mouseDown = false;
        return false;
    });
    $container.addEventListener("mousemove",function(e){
        if(mouseDown)
        {
            var curPos = Phone.getInstance().div.position;
            Phone.getInstance().div.translates(curPos.x+ e.webkitMovementX, curPos.y+ e.webkitMovementY);
        }
    });
    $container.addEventListener("mousewheel",function(e){
        var curScale = Phone.getInstance().div.scale.x;
        var rate = 0.0003;
        var targetScale = (curScale+rate* e.wheelDelta).clamp(0.3, 1.5);

        Phone.getInstance().setScale(targetScale);
        $zoomPercent.textContent = (0|(targetScale*100)) + "%";
    });
    $zoomPercent.addEventListener("click", function(){
        var targetScale = 1;
        Phone.getInstance().setScale(targetScale);
    });


})();
</script>